<template>
  <div class="box">
    <aside-box>
      <template #zh> 进度图 </template>
      <template #en> progress chart </template>
      <div class="progress" ref="progressRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
let data = [90, 80, 75];
let titlename = ["高风险时空占比", "高风险覆盖率", "高风险时长占比"];
let valdata = [];
let myColor = ["#1089E7", "#F57474", "#56D0E3"];
const option = {
  //图标位置
  grid: {
    left: "22%",
    top: "5%",
    right: "3%",
    bottom: "0%",
  },
  xAxis: {
    show: false,
  },
  yAxis: [
    {
      show: true,
      data: titlename,
      inverse: true,
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        textStyle: {
          fontSize: 12,
          color: "#fff",
          fontFamily: "阿里妈妈数黑体 Bold",
        },
        rich: {
          lg: {
            backgroundColor: "#339911",
            color: "#fff",
            borderRadius: 15,
            // padding: 5,
            align: "center",
            width: 15,
            height: 15,
          },
        },
      },
    },
    {
      show: true,
      inverse: true,
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: valdata,
      axisLabel: {
        textStyle: {
          fontSize: 12,
          color: "#fff",
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
    },
  ],
  series: [
    {
      name: "条",
      type: "bar",
      yAxisIndex: 0,
      data: data,
      barCategoryGap: 50,
      barWidth: 14,
      itemStyle: {
        normal: {
          barBorderRadius: 20,
          color: function (params) {
            var num = myColor.length;
            return myColor[params.dataIndex % num];
          },
        },
      },
      label: {
        normal: {
          show: true,
          position: "inside",
          formatter: "{c}%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontFamily: "阿里妈妈数黑体 Bold",
          },
        },
      },
    },
    {
      name: "框",
      type: "bar",
      yAxisIndex: 1,
      barCategoryGap: 50,
      data: [100, 100, 100],
      barWidth: 22,
      itemStyle: {
        normal: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 2,
          barBorderRadius: 55,
        },
      },
    },
  ],
};

const [progressRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .progress {
    width: 100%;
    height: 200px;
  }
}
</style>